<template>
	<ele-modal
		:width="750"
		:visible="visible"
		:confirm-loading="loading"
		title="提示"
		:body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible"
		@ok="save"
	>
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="20" :sm="24" :xs="24">
					<a-form-item label="审核结果" @change="change" v-bind="validateInfos.status">
						<a-radio-group v-model:value="form.status">
						      <a-radio :value="2">审核通过</a-radio>
						      <a-radio :value="3">审核拒绝</a-radio>
						    </a-radio-group>
					</a-form-item>
					<a-form-item label="原因" v-if="causeShow"  v-bind="validateInfos.cause">
						<a-textarea
							placeholder="请输入原因"
							allow-clear
							v-model:value="form.cause"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';

// 表格列配置
const useForm = Form.useForm;

const props = defineProps({
	// 弹窗是否打开
	visible: Boolean,
	// 编辑数据id
	editData: Object
});

const emit = defineEmits(['done', 'update:visible']);

// 提交状态
const loading = ref(false);
const causeShow = ref(false);

// 表单数据
const form = reactive({
	code : '',
	status : '',
	cause : ''
});

onMounted(()=>{
	form.code = props.editData.code;
});

const  change = (e)=>{
	console.log(e);
	console.log(e.target.value);
	if(e.target.value == 3){
		causeShow.value = true;
		rules.cause[0].required = true;
	}else{
		causeShow.value = false;
		rules.cause[0].required = false;
	}
}
// 表单验证规则
const rules = reactive({
	status: [
		{
			required: true,
			message: '请选择审核结果',
			trigger: 'change'
		}
	],
	cause: [
		{
			required: false,
			message: '请选择审核结果',
			trigger: 'change'
		}
	]	
});

const { validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
	validate()
		.then(() => {
			console.log("form", form);
			emit('done', form);
		})
		.catch(() => {});
};
/* 更新visible */
const updateVisible = value => {
	emit('update:visible', value);
};

</script>
<style scoped></style>
